<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" />
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>采购管理</li>
    <li>采购单管理</li>
    <li>添加</li>
  </ul>
</div>
<div class="formbody">
  <div class="formtitle"><span>采购单信息</span></div>
  <ul class="forminfo">
    <li>
      <label>采购单编号</label>
      <input name="" type="text" value="CG201711180001" readonly="readonly" class="roinput" />
      <i>自动生成不能编辑</i>
    </li>
    <li>
      <label>采购时间</label>
      <input name="" type="text" value="2019-11-18 15:36:10" readonly="readonly" class="roinput" />
      <i>不能编辑</i>
    </li>
    <li>
      <label>创建人</label>
      <input type="text" th:value="${session.users.uname}" readonly="readonly" class="roinput" />
      <i>不能编辑</i>
    </li>
    <li>
      <label>审核状态</label>
      <input type="text" value="未审核" readonly="readonly" class="roinput" />
      <input name="" type="hidden" value="1" />
      <i>初始状态，不能编辑</i>
    </li>
    <li>
      <label>总金额</label>
      <input name="totalMoney" type="text" readonly="readonly" class="roinput" />
       <i>自动运算，不能编辑</i>
    </li>
    <li>
      <input type="button" value="新增" id="in1" class="smallbtn"/>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="删除" class="smallbtn" id="del"/>
       &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="保存" class="smallbtn" onclick="submitTo()"/>
       &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="返回" class="smallbtn" onclick="history.go(-1)"/>
    </li>
  </ul>
  <table class="tablelist" id="t1">
      <thead>
        <tr>
          <th>序号</th>
          <th>品牌</th>
          <th>类型</th>
          <th>型号</th>
          <th>厂商</th>
          <th>数量</th>
          <th>单位</th>
          <th>单价</th>
          <th>金额</th>
            <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbody">
      	<tr>
          <td>1</td>
          <td>
          	<select class='pai' name="brandId" onchange="getbrands(this)">
            	<option value="">请选择</option>
            </select>
          </td>
          <td>
          	<select class="typeId" name="typeId" onchange="getProducts(this.value)">
            	<option value="">请选择</option>

            </select>
          </td>
          <td>
          	<select  name="cProducts" onchange="ajaxPrice(this.value)">
            	<option value="">请选择</option>

            </select>
          </td>
          <td>
          	<select  name="cFirms">
            	<option value="">请选择</option>

            </select>
          </td>
          <td><input type="text" name="count" onblur="sum()"/></td>
          <td>台</td>
          <td><input type="text" name="price" onblur="sum()"/></td>
          <td><input type="text" name="money"/></td>
            <td><input type="checkbox" name="che"/></td>
        </tr>
      </tbody>
  </table>
    <input type="hidden" id="price">
</div>
<script type="text/javascript">
    var i=1;
/*点击添加的单击事件*/
$("#in1").click(function (){
    i++;
    $("#t1").append("<tbody id=\"tbody\">\n" +
        "      \t<tr>\n" +
        "          <td>"+i+"</td>\n" +
        "          <td>\n" +
        "          \t<select class='pai' name=\"brandId\"onchange=\"getbrands(this)\" >\n" +
        "            \t<option value=\"\">请选择</option>\n" +
        "            </select>\n" +
        "          </td>\n" +
        "          <td>\n" +
        "          \t<select class='typeId' name=\"typeId\" onchange=\"getProducts(this.value)\">\n" +
        "            \t<option value=\"\">请选择</option>\n" +
        "\n" +
        "            </select>\n" +
        "          </td>\n" +
        "          <td>\n" +
        "          \t<select  name=\"cProducts\" onchange=\"ajaxPrice(this.value)\">\n" +
        "            \t<option value=\"\">请选择</option>\n" +
        "\n" +
        "            </select>\n" +
        "          </td>\n" +
        "          <td>\n" +
        "          \t<select  name=\"cFirms\">\n" +
        "            \t<option value=\"\">请选择</option>\n" +
        "\n" +
        "            </select>\n" +
        "          </td>\n" +
        "          <td><input type=\"text\" name=\"count\" onblur=\"sum()\"/></td>\n" +
        "          <td>台</td>\n" +
        "          <td><input type=\"text\" name=\"price\" onblur=\"sum()\"/></td>\n" +
        "          <td><input type=\"text\" name=\"money\"/></td>\n" +
        "            <td><input type=\"checkbox\" name=\"che\"/></td>\n" +
        "        </tr>\n" +
        "      </tbody>")
    pai();
})
    /*批量删除*/
    $("#del").click(function() {
        var cbs = $("input[type=checkbox]:checked");
        if(cbs.length==0){
            alert("请至少选择一个");
            return
        }
        for (var i =0;i<cbs.length;i++) {
            var cb = cbs[i];
            cb.parentNode.parentNode.remove();
        }

        if (cbs.length==1) {
            $("#table").empty();
        }

    })
    /*查询品牌*/
    function pai(){
        $.ajax({
            url: "/purchase/cproduct/selectpai",
            type: "post",
            datatype: "json",
            success: function (data) {
                var str="<option value=\"\">请选择</option>"
                for (var i=0;i<data.length;i++){
                    str+="<option value=\""+data[i].brandId+"\">"+data[i].brandName+"</option>"
                }
                $(".pai").html(str)
            }
        });
    }
    /*【品牌内容发生改变是触发的事件----查类型*/
    /*$(".pai").change(function (){
        $.ajax({
            url: "/purchase/cproduct/selecttype",
            data:{brandId:$(".pai").val()},
            type: "post",
            datatype: "json",
            success: function (data) {
                var str="<option value=''>请选择</option>"
                for (var i=0;i<data.length;i++){
                    str+="<option value=\""+data[i].typeId+"\">"+data[i].typeName+"</option>"
                }
                $(".typeId").html(str)
            }
        });
    })*/
    $(function (){
        pai();
    })
    // 异步得到商品
    function getProducts(typeId) {
        var cBrands = $("select[name=cBrands]").val();
        // console.log("类型id："+typeId+",品牌id："+cBrands);
        var $pro = $("select[name=cProducts]");
        $.get("/erp/rkWarehouse/ajaxPro",{"typeId":typeId,"brandId":cBrands},function (data) {
            var str = "<option value=\"\">请选择</option>";
            $.each(data,function (i, e) {
                str += "<option value='"+e.productId+"'>"+e.productModel+"</option>";
            })
            $pro.html("");
            $pro.append(str);
        },"json");
    }

    // 异步获取 类型
    function getbrands(num) {
            $.ajax({
                url: "/purchase/cproduct/selecttype",
                data:{brandId:$(num).val()},
                type: "post",
                datatype: "json",
                success: function (data) {
                    var str="<option value=''>请选择</option>"
                    for (var i=0;i<data.length;i++){
                        str+="<option value=\""+data[i].typeId+"\">"+data[i].typeName+"</option>"
                    }
                    $(num).parent("td").next("td").find(".typeId").html(str);
                }
        })
    }

    // 提交
    function submitTo(){
        sum();
        var cBrands = $("select[name=cBrands]").val();
        var cTypes = $("select[name=cTypes]").val();
        var cProducts = $("select[name=cProducts]").val();
        var cFirms = $("select[name=cFirms]").val();
        var count = $("input[name=count]").val();
        var price = $("input[name=price]").val();
        var money = $("input[name=money]").val();
        if(cBrands!=null && cTypes!=null && cProducts!=null &&cFirms!=null && count!=null && price!=null && money!=null ){
            location.href="/erp/purchase/savePurAndDetails?cBrands="+cBrands+"&cTypes="+cTypes+"&cProducts="+cProducts+
            "&cFirms="+cFirms+"&count="+count+"&price="+price+"&money="+money;
        }
    }

    // 计算金额
    function sum(){
        var count = $("input[name=count]").val();  //商品数量
        var price = $("input[name=price]").val();  //商品价格
        if(count!=null){
            $("input[name=money]").val(count*price);
            $("input[name=totalMoney]").val(count*price);

        }
    }

    // 异步 得出商品价格
    function ajaxPrice(productId){
        $.get("/erp/purchase/ajaxPrice",{"productId":productId},function (data) {
            $("input[name=price]").val(data.productPrice);
            var str = "<option value='"+data.cfirm.firmId+"'>"+data.cfirm.firmName+"</option>";

            $("select[name=cFirms]").html("");
            $("select[name=cFirms]").append(str);
        },"json");
        sum();
    }

	$('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
